<!--
	作者：819115696@qq.com
	时间：2016-06-23
	描述：
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="js/test.js"></script>
		<style>
			.d {
				width: 200px;
				height: 200px;
			}
		</style>
		<script>
			$(function() {
				//init();
			})
		</script>
	</head>

	<body>

		<ul id="source">
			<li>北京空气质量：<b>90</b></li>
			<li>上海空气质量：<b>70</b></li>
			<li>天津空气质量：<b>80</b></li>
			<li>广州空气质量：<b>50</b></li>
			<li>深圳空气质量：<b>40</b></li>
			<li>福州空气质量：<b>32</b></li>
			<li>成都空气质量：<b>90</b></li>
		</ul>

		<ul id="resort">
			<!-- 
    <li>第一名：北京空气质量：<b>90</b></li>
    <li>第二名：北京空气质量：<b>90</b></li>
    <li>第三名：北京空气质量：<b>90</b></li>
     -->

		</ul>

		<button id="sort-btn">排序</button>

		<script type="text/javascript">
			/**
			 * getData方法
			 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
			 * 返回一个数组，格式见函数中示例
			 */
			function CCC(){
				this.chengshi="空";
				this.wuran=0;
			}
			function getData() {
				var data=new Array();
				var a =document.getElementById("source")
				var a2=a.getElementsByTagName("li");
				var a3=a.getElementsByTagName("b");
				
				for(var i=0;i<a2.length;i++){
					
					var b=a2[i].firstChild.textContent;
					var b2=a3[i].firstChild.textContent;
					//alert(b2)
					var ccc=new CCC();//注意:变量是new的,,否则指向的是同一个
					ccc.chengshi=b;
					ccc.wuran=b2;
					data.push(ccc);
					//alert(ccc.chengshi)
					
					//alert(data[i].wuran)
				}
				/*
				data = [
				  ["北京", 90],
				  ["北京", 90]
				  ……
				]for(var sss =0;sss<data.length;sss++){
					alert(data[sss].wuran);
				}
				*/
				
				return data;

			}

			/**
			 * sortAqiData
			 * 按空气质量对data进行从小到大的排序
			 * 返回一个排序后的数组
			 */
			function sortAqiData(data) {
				
				for(var i=0;i<data.length;i++){
					var tem=data[i];//alert(tem.chengshi);
					for(var j=i+1;j<data.length;j++){
						if(tem.wuran<data[j].wuran){
							data[i]=data[j]
							data[j]=tem;
							
						}
						tem=data[i];//alert(tem.chengshi); 
					}
				}
				return data;
			}

			/**
			 * render
			 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
			 * 格式见ul中的注释的部分
			 */
			function render(data) {
				var res=document.getElementById("resort");
				for(var i=0;i<data.length;i++){
					var da1=data[i].chengshi;
					var da2=data[i].wuran;
					var li=document.createElement("li");
					var litext=document.createTextNode(da1);
					var b=document.createElement("b");
					var btext=document.createTextNode(da2);
					li.appendChild(litext);
					b.appendChild(btext);
					li.appendChild(b);
					res.appendChild(li)
				}
			}

			function btnHandle() {	
				var aqiData = getData();
				aqiData = sortAqiData(aqiData);
				render(aqiData);
			}

			function init() {

				// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
				document.getElementById("sort-btn").onclick=btnHandle;
			}

			init();
		</script>
	</body>

</html>